<template>
  <view class="container">
	  <view class="chart-container" style="margin-bottom: 10px;margin-top: 10px;">
	    <text class="description-text" style="width:50%; margin-left: 28%;">
	      {{name}} {{code}}
	    </text>
	  </view>
    <!-- 图表容器 -->
    <view class="chart-container">
      <!-- <canvas canvas-id="mychart" id="mychart" style="width: 100%; height: 300px;"></canvas> -->
      <view style="width:100%; height:750rpx;">
        <LEchart  ref="chartRef"></LEchart >
      </view>
    </view>

    <!-- 描述部分 -->
    <view class="description">
      <text class="description-text">
        实际价格：当日真实最高价与最低价的平均值
      </text>
      <br/>
      <text class="description-text">
        预测价格：预测最高价与最低价的平均值
      </text>
    </view>

    <!-- 按钮部分 -->
    <view class="button-container" style="display: none">
      <button class="button share-button">分享预测</button>
      <button class="button predict-button">预测排行</button>
    </view>
  </view>
</template>

<script setup>
import LEchart from './l-echart/l-echart.vue'
import {ref, onMounted} from 'vue'
import {stockInfo} from '../../../common/constants';
// #ifdef MP
const echarts = require('./static/echarts.min')
// #endif

// #ifndef MP
import * as echarts from 'echarts'
// #endif


// 获取容器的dom元素
const chartRef = ref(null)
// echart图表的配置信息
const Options = ref({})
let option = ref(null)
let MyPie;
let code = ref("000001")
let name = ref("中国平安")

let data = [
  ["Income", "Country", "Year"],
  [10, "预测最高价", "20240501"],
  [10, "预测最高价", "20240502"],
  [10, "预测最高价", "20240503"],
  [10, "预测最高价", "20240504"],
  [10, "预测最高价", "20240505"],
  [10, "预测最高价", "20240506"],
  [10, "预测最高价", "20240507"],
  [10, "预测最高价", "20240508"],
  [10, "预测最高价", "20240509"],
  [10, "预测最高价", "20240510"],
  [10, "预测最高价", "20240511"],
  [10, "预测最高价", "20240512"],
]


onMounted(() => {
  // addPie()
  let result = uni.getStorageSync("result")
  name.value = uni.getStorageSync("name")
  code.value = uni.getStorageSync("code")
  // print(trend)
  data = JSON.parse(result)
  console.log(data.high)
  console.log(data.low)
  console.log(data.date)
  run(data)
})
const run = async (_rawData) => {
  MyPie = await chartRef.value.init(echarts)

  option = {
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      data: [stockInfo.actual, stockInfo.predict]
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      data: _rawData.date
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: stockInfo.actual,
        type: 'line',
        // stack: 'Total',
        data: _rawData.actual
      },
      {
        name: stockInfo.predict,
        type: 'line',
        // stack: 'Total',
        data: _rawData.predict
      }
    ]
  };
  // myChart.setOption(option);
  MyPie.setOption(option)
}
// // 加载饼图结构
// const addPie = async () => {
//   const MyPie = await chartRef.value.init(echarts)
//   Options.value = {
//     title:{
//       text:'支出构成',
//       left:"center",
//       top:"10rpx"
//     },
//     tooltip: {
//       trigger: 'item'
//     },
//     legend: {
//       orient: 'vertical',
//       top:"5%",
//       left: 'left',
//     },
//     series: [
//       {
//         name: 'Access From',
//         type: 'pie',
//         radius: ['40%', '70%'],
//         avoidLabelOverlap: false,
//         label: {
//           show: false,
//           position: 'center'
//         },
//         emphasis: {
//           label: {
//             show: true,
//             fontSize: 10,
//             fontWeight: 'bold'
//           }
//         },
//         labelLine: {
//           show: false
//         },
//         data: [
//           { value: 1048, name: 'Search Engine' },
//           { value: 735, name: 'Direct' },
//           { value: 580, name: 'Email' },
//           { value: 484, name: 'Union Ads' },
//           { value: 300, name: 'Video Ads' }
//         ]
//       }
//     ]
//   }
//   MyPie.setOption(Options.value)
// }

</script>
<style>
/* .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  height: 100vh;
} */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* margin: 20px; */
  /* padding: 20px; */
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f5f5f5;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.chart-container {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin-bottom: 20px;
}

.description {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.description-text {
  font-size: 16px;
  color: #333333;
  text-align: center;
}

.button-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.button {
  width: 45%;
  padding: 10px 0;
  background-color: #007AFF;
  color: #ffffff;
  text-align: center;
  border-radius: 5px;
  font-size: 16px;
}

.share-button {
  background-color: #4CAF50; /* 绿色背景色 */
}

.predict-button {
  background-color: #FF5722; /* 红色背景色 */
}
</style>
